<template>
    <div class="categoryBox">
    <div class="contain">
    <h3>全部分类</h3>
    <ul>
      
  <router-link :to="`cagegory/sub/${i.id}`" v-for="i in list" :key="i.id">
  <img :src="i.picture" alt="">
     {{i.name}}
     </router-link>

    </ul> 
   
   
    </div>
    </div>
</template>

<script setup>
import {computed,ref} from 'vue'
import { useStore, } from 'vuex'
import { useRoute } from 'vue-router'
import { SubCategory} from '@/api/http'
const route = useRoute()
const store = useStore()
const list = ref([])
const cagegor =store.state.category.subCategoryList
const getdata =async () =>{
    const {data :res} = await  SubCategory(route.params.id)
    console.log('二级分类',res)
    list.value = res.result.children
 }
// store.dispatch('getSubCategoryList', {id:route.params.id})
getdata()
</script>

<style lang="less" scoped>
.categoryBox{
    width: 100%;
    height: 260px;
}
.contain{
    background-color: #fff;
    min-height: 230px;
}
h3{
    font-size: 28px;
    color: #666666;
    line-height: 100px;
    text-align: center;
}
ul>a{
    display: block;
    display: flex;
    /*设置主轴方向为垂直方向，目的是让图片和文字从上到下排列*/
	flex-direction: column;
	/*设置主轴上子元素水平居中,此时主轴是垂直方向*/
	justify-content: center;
	/*设置侧轴上子元素居中,此时侧轴是水平方向*/
	align-items: center;
    color: #333;
}
ul{
    
    display: flex;
    justify-content: space-around;
}
ul img{
    width: 100px;
    height: 100px;
}
</style>